<script setup>
import {ref} from "vue"
const result = ref('');
const showPicker = ref(false);
const pickerValue = ref([]);
const columnsType = ['year', 'month'];
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join('-');
  pickerValue.value = selectedValues;
  showPicker.value = false;
};

</script>

<template>
  <van-field
      v-model="result"
      is-link
      readonly
      name="datePicker"
      label="日期选择"
      placeholder="点击选择日期"
      @click="showPicker = true"
  />
  <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
    <van-date-picker
        :model-value="pickerValue"
        :columns-type="columnsType"
        @confirm="onConfirm"
        @cancel="showPicker = false"
    />
  </van-popup>

</template>

<style scoped>

</style>